<template>
<div>
  <div ref="pieDiv" style="width: 600px;height:400px;"></div>

  <div style="width: 300px;height: 200px;border: 1px #000 solid;line-height: 30px;margin-left: 600px;margin-top: 50px">
    <h5>查询销售统计信息</h5>
    <div>起始日期<el-input style="width: 200px"/></div>
    <div>结束日期<el-input style="width: 200px"/></div>
    <el-button type="success">查询</el-button>
  </div>
</div>

</template>

<script>
import * as echarts from 'echarts';
export default {
name: "countSell",
data(){
    return{
      productType:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      sellNum: [5, 20, 36, 10, 10, 20],
      gradeList: [
        { value: 5, name: '90以上' },
        { value: 4, name: '80-90' },
        { value: 12, name: '60-80' },
        { value: 6, name: '60以下' }
      ]
        }
    },
  methods:{
    createPie(){//饼图
      var pieChart = echarts.init(this.$refs.pieDiv);
      var option = {
        title: {
          text: '',
          subtext: '2022-07-22',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '价格',
            type: 'pie',
            radius: '50%',
            data: this.gradeList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(option);
    }
  },
  mounted() {
  this.createPie();
  }
}
</script>

<style scoped>

</style>